import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, NavLink } from 'react-router-dom'
import MyRoute from './router'
// import Home from './home'
// import About from './about'
function loadable(obj) {
  let { loader, loading: Loading } = obj;
  let Com;
  return function (props) {
    let [flag, setFlag] = useState(false)
    loader().then(data => {
      console.log(data)
      Com = data.default
      setFlag(true)
    })
    return <>
      {
        flag ? <Com {...props} /> : <Loading />
      }

    </>
  }
}
const Home = loadable({
  loader: () => import(/* webpackChunkName:"home"*/'./home'),
  loading: () => <h1>加载中</h1>
})
const About = loadable({
  loader: () => import(/* webpackChunkName:"about"*/'./about'),
  loading: () => <h1>加载中</h1>
})


class App extends React.Component {
  state = {
    flag: true
  }
  fn = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
  render() {
    return <div className=''>
      {/* <button onClick={this.fn}>按钮</button>
      {
        this.state.flag ? <Home className='box' /> : <About />
      } */}
      <NavLink to='/home'>home</NavLink>
      {/* <NavLink to='/about'>about</NavLink> */}
      <MyRoute path='/home' component={Home}>
        <Route path='/home/about' component={About}></Route>
      </MyRoute>
    </div>;
  }
}

ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'))